<template>
	<view>
		<view class="tab_box">
			<view @click="qh(1)" :class="sta == 1?'tab1 active':'tab1'">贷款信息</view>
			<view @click="qh(2)" :class="sta == 2?'active':''">车商信息</view>
			<view @click="qh(3)" :class="sta == 3?'tab2 active':'tab2'">附件信息</view>
			<view @click="qh(4)" :class="sta == 4?'tab1 active':'tab1'">合同附件</view>
			<view @click="qh(5)" :class="sta == 5?'tab2 active':'tab2'">查看日志</view>
		</view>
		<!-- 贷款信息 -->
		<view v-if="sta == 1 && staArr[0] == 1" class="bigbox">
			<view class="fot1">贷款信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
				<!-- <view class="g_fot1">订单编号：HC2020030001</view> -->
			</view>
			<view>
				<view class="box2" v-for="item in list1">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
			<view class="fot1">客户信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view>
				<view class="box2" v-for="item in list2">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
			<view class="fot1">工作信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view>
				<view class="box2" v-for="item in list3">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
			<view class="fot1">联系人信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view>
				<view class="box2" v-for="item in list4">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
			<view class="fot1">配偶信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view>
				<view class="box2" v-for="item in list5">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
			<view class="fot1">担保人信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view style="margin-bottom: 30rpx;">
				<view class="box2" v-for="item in list6">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
		</view>
		<!-- 车商信息 -->
		<view v-if="sta == 2 && staArr[1] == 1" class="bigbox">
			<view class="fot1">车商信息</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
			</view>
			<view style="margin-bottom: 30rpx;">
				<view class="box2" v-for="item in list7">
					<view>{{item.query02}}</view>
					<view>{{item.query07}}</view>
				</view>
			</view>
		</view>
		<!-- 附件信息 -->
		<view v-if="sta == 3 && staArr[2] == 1" class="bigbox">
			<view class="bj_box">
				<view @click="bj_sta=true">编辑</view>
				<view @click="bj_sta=false">确认</view>
			</view>
			<view v-for="item in img1">
				<view class="fot1">{{item.query03}}</view>
				<view class="box1">
					<view>
						<view class="fot3">基础信息（必填）</view>
					</view>
				</view>
				<view class="img_box">
					<view class="img_box1"  v-for="(item1,index) in item.query05">
						<image 
							v-if="item.query05 == null" 
							:src="item.query07"
							class="active1"
							>
						</image>
						<image 
							v-if="item.query05 != null"
							:src="item1" 
							@click="uploading(item,index)"
							class="active1"
							>
						</image>
						<view :class="item.query05.length-1 != index?'zhezhao':'zhezhao1'" @click="shan(item,index)" v-if="bj_sta">
							<image class="" src="../../static/83.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="btn1">
				<view class="all_btn btn_all" @click="xiayibu()">保存</view>
				<view class="all_btn btn_all" @click="tijiao()">提交</view>
			</view> -->
			<tanchuang v-if="tc_tijiao" 
			 @tcnr="tanchuaung_nr"
			 @tcgb="tanchuaung_gb"></tanchuang>
			
		</view>
		<!-- 合同附件 -->
		<view v-if="sta == 4 && staArr[3] == 1" class="bigbox">
			<view v-for="item in ht_list" class="ht_box">
				<view class="ht_box1">{{item.query02}}</view>
				<view class="ht_box3">
					<view class="ht_box4" @click="copy(item.query06)" v-if="item.query06!=null&&item.query06!=''">转发</view>
					<view class="ht_box2" @click="see(item.query06)" v-if="item.query06!=null&&item.query06!=''">查看</view>
				</view>
			</view>
		</view>
		<!-- 查看日志 -->
		<view v-if="sta == 5 && staArr[4] == 1" style="padding: 30rpx;box-sizing: border-box;">
			<view class="cee_rz" v-for="item in rizhi_list">
				<view>
					<view>操作类型</view>
					<view>{{item.query02}}</view>
				</view>
				<view>
					<view>操作人</view>
					<view>{{item.createBy}}</view>
				</view>
				<view>
					<view>操作时间</view>
					<view>{{item.createTime}}</view>
				</view>
				<view>
					<view>备注</view>
					<view>{{item.query03}}</view>
				</view>
			</view>
		</view>
		<!-- 无权限 -->
		<view v-if="sta == 1 && staArr[0] == 0" class="zw">暂无权限</view>
		<view v-if="sta == 2 && staArr[1] == 0" class="zw">暂无权限</view>
		<view v-if="sta == 3 && staArr[2] == 0" class="zw">暂无权限</view>
		<view v-if="sta == 4 && staArr[3] == 0" class="zw">暂无权限</view>
		<view v-if="sta == 5 && staArr[4] == 0" class="zw">暂无权限</view>
	</view> 
</template>

<script>
	import tanchuang from '../../component/tanchuang.vue'
	export default {
		data() {
			return {
				rizhi_list:[],
				bz:'',
				zhuangtai:[],
				zhuangtai1:[],
				index: 0,
				b1: [],
				b2: [],
				b3: [],
				b4: [],
				b5: [],
				b6: [],
				b7: [],
				b8: [],
				b9: [],
				b10: [],
				b11: [],
				b12: [],
				index1: 0,
				index2: 0,
				index3: 0,
				index4: 0,
				index5: 0,
				index6: 0,
				index7: 0,
				index8: 0,
				index9: 0,
				index10: 0,
				index11: 0,
				index12: 0,
				tc_tijiao:false,
				bj_sta:false,
				sta:5,
				list1:[],//贷款信息
				list2:[],
				list3:[],
				list4:[],
				list5:[],
				list6:[],
				list7:[],
				list8:[],
				img1:[],
				img2:[],
				allUrl:'',
				viewerUrl:'',
				filePath1:'',
				filePath2:'',
				a1:'',
				a2:'',
				a3:'',
				a4:'',
				a5:'',
				a6:'',
				ht_list:[],
				staArr:[]
			}
		},
		components:{tanchuang},
		onLoad:function(option) {
			console.log(JSON.parse(option.item))
			if(JSON.parse(option.item).data05!=''&&JSON.parse(option.item).data05!=null){
				uni.setNavigationBarTitle({
					title:JSON.parse(option.item).data05
				})
			}else{
				uni.setNavigationBarTitle({
					title:JSON.parse(option.item).query17
				})
			}
			console.log(JSON.parse(option.item).data04)
			if(JSON.parse(option.item).data04 == 'ckrz'){this.staArr = [0,0,0,0,1]}
			if(JSON.parse(option.item).data04 == 'ckxq'){this.staArr = [1,1,1,1,1]}
			if(JSON.parse(option.item).data04 == 'ckfj'){this.staArr = [0,0,1,0,0]}
			if(JSON.parse(option.item).data04 == 'ckddxx'){this.staArr = [1,1,0,0,0]}
			if(JSON.parse(option.item).data04 == 'ckfaxx'){this.staArr = [0,1,0,0,0]}
			this.id = JSON.parse(option.item).id
			this.hetong()
			this.initial('贷款信息',1)
			this.initial('客户信息',1)
			this.initial('工作信息',1)
			this.initial('联系人信息',1)
			this.initial('配偶信息',1)
			this.initial('担保人信息',1)
			this.initial('车商信息',1)
			this.initial('',2)
			this.shujuType('zyl')
			this.shujuType('sxqs')
			this.shujuType('ll')
			this.shujuType('fkfs')
			this.shujuType('hkfs')
			this.shujuType('xbc')
			this.shujuType('fkcs')
			this.shujuType('gpsaz')
			this.shujuType('spzt')
			this.shujuType('tjxyjsp')
			this.shujuType('qyfs')
			this.shujuType1('yspzt')
			this.rizhi()
		},
		methods: {
			tanchuaung_gb:function(data){
				this.tc_tijiao = false;
			},
			shujuType1:function(type){
				this.$get('sys/dict/getDictItems/' + type).then((item)=>{
					console.log(item.data.result)
					if(type == 'yspzt'){//预审批状态
						console.log(item.data.result)
						this.zhuangtai = item.data.result
						item.data.result.forEach((item,index)=>{
							this.zhuangtai1.push(item.title)
						})
					}
				})
			},
			copy:function(url){
				uni.setClipboardData({
				    data: url,
				    success: function () {
				        uni.showToast({
				        	title:'复制成功,请到浏览器粘贴下载',
							icon:'none'
				        })
				    }
				});
			},
			see:function(url){
				uni.downloadFile({
				  url: url,
				  success: function (res) {
				    var filePath = res.tempFilePath;
					uni.openDocument({
					  filePath: filePath,
					  success: function (res) {
					    console.log('打开文档成功');
					  }
					});
				  }
				});
			},
			hetong:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_05ByMainId',{
					rid:this.id,
					pageNo:1,
					pageSize:999
				}).then((res)=>{
					console.log(res.data.result.records,55555)
					this.ht_list = res.data.result.records
				})
			},
			tsp:function(){
				this.xiayibu()
				
			},
			shujuType:function(type){
				this.$get('sys/dict/getDictItems/' + type).then((item)=>{
					// console.log(item.data.result)
					if(type == 'zyl'){
						item.data.result.forEach((item)=>{
							this.b1.push(item.title)
						})
					}else if(type == 'sxqs'){
						item.data.result.forEach((item)=>{
							this.b2.push(item.title)
						})
					}else if(type == 'll'){
						item.data.result.forEach((item)=>{
							this.b3.push(item.title)
						})
					}else if(type == 'fkfs'){
						item.data.result.forEach((item)=>{
							this.b4.push(item.title)
						})
					}else if(type == 'hkfs'){
						item.data.result.forEach((item)=>{
							this.b5.push(item.title)
						})
					}else if(type == 'xbc'){
						item.data.result.forEach((item)=>{
							this.b6.push(item.title)
						})
					}else if(type == 'fkcs'){
						item.data.result.forEach((item)=>{
							this.b7.push(item.title)
						})
					}else if(type == 'gpsaz'){
						item.data.result.forEach((item)=>{
							this.b8.push(item.title)
						})
					}else if(type == 'spzt'){
						item.data.result.forEach((item)=>{
							this.b9.push(item.title)
						})
					}else if(type == 'tjxyjsp'){
						item.data.result.forEach((item)=>{
							this.b10.push(item.title)
						})
					}else if(type == 'qyfs'){
						item.data.result.forEach((item)=>{
							this.b11.push(item.title)
						})
					}
				})
			},
			qh:function(e){
				this.sta = e
			},
			rizhi:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_09ByMainId',{
					// rid:this.id,
					rid:'1268458482363441154'
				}).then((res)=>{
					console.log(res.data)
					this.rizhi_list = res.data.result.records
				})
			},
			// 初始
			initial:function(arr,type){
				if(type == 1){
					this.$get('buse/fxjBuse_02/listFxjBuseitem_08ByMainId',{
						query10: arr,
						pageNo:1,
						pageSize:999
					}).then((res)=>{
						if(arr == '贷款信息'){this.list1 = res.data.result.records}
						if(arr == '客户信息'){this.list2 = res.data.result.records}
						if(arr == '工作信息'){this.list3 = res.data.result.records}
						if(arr == '联系人信息'){this.list4 = res.data.result.records}
						if(arr == '配偶信息'){this.list5 = res.data.result.records}
						if(arr == '担保人信息'){this.list6 = res.data.result.records}
						if(arr == '车商信息'){this.list7 = res.data.result.records}
					})
				}else if(type == 2){
					this.$get('buse/fxjBuse_02/listFxjBuseitem_01ByMainId',{
						query03:arr,
						rid:this.id,
						pageSize:999
					}).then((res)=>{
						this.img1 = res.data.result.records
						this.img1.forEach((item)=>{
							console.log(item.query05)
							let arr = new Array;
							let dat
							arr = item.query05.split(",")
							item.query05 = arr
							dat =  item.query05[item.query05.length - 1]
							if(dat != item.query07){
								item.query05.push(item.query07)
							}
						})
					})
				}else if(type == 3){
					this.$get('buse/fxjBuse_02/listFxjBuseitem_01ByMainId',{
						query03:arr,
						rid:this.id,
						pageSize:999
					}).then((res)=>{
						this.img2 = res.data.result.records[0]
						console.log(res.data.result.records[0].query05)
						let a = res.data.result.records[0].query05
						uni.downloadFile({
						  url: a,
						  success: function (res) {
						    var filePath = res.tempFilePath;
							uni.openDocument({
							  filePath: filePath,
							  success: function (res) {
							    console.log('打开文档成功');
							  }
							});
						  }
						});
						
						
						
						
					})
				}
				
				
				
			}
		}
	}
</script>

<style>
	.cee_rz>view>view{
		width: 50%;
	}
	.cee_rz>view{
		height: 60rpx;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.cee_rz{
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	.zw{
		height: 500rpx;
		font-size: 50rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.w_fot1{
		margin: 20rpx 0;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0,0,0,1);
	}
	textarea{
		width: 100%;
		border: 1px solid #ececec;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.box3_2{
		background:rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		border:1px solid rgba(66,134,245,1);
	}
	.box3_1{
		border:1px solid rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(66,134,245,1);
	}
	.box3>view{
		width: 48%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.box3{
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: auto;
		margin: 40rpx 0;
	}
	.ht_box4{
		margin-left: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border: 1px solid #0F77FE;
		border-radius: 10rpx;
		color: #FFFFFF;
		background-color: #0F77FE;
	}
	.ht_box3{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ht_box2{
		margin-left: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border: 1px solid #0F77FE;
		border-radius: 10rpx;
		color: #0F77FE;
	}
	.ht_box1{
		width: 70%;
	}
	.ht_box{
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #CCCCCC;
	}
	textarea{
		width: 100%;
		border: 1px solid #CCCCCC;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 30rpx 0;
	}
	.xlk{
		width: 100%;
		text-align: right;
	}
	.btn1>view{
		width: 48%;
	}
	.btn1{
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin: 30rpx 0;
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.bj_box>view{
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #0F77FE;
		color: #0F77FE;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	.bj_box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zhezhao>image,.zhezhao1>image{
		width: 35rpx;
		height: 35rpx;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zhezhao1{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.img_box1>image{
		width: 100%;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.img_box1{
		width: 30%;
		height: 150rpx;
		margin-right: 3.3%;
		text-align: center;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		position: relative;
		/* border: 1px solid red; */
		margin-bottom: 30rpx;
	}
	.img_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.zxj{
	    width: 36rpx;
	    height: 32rpx;
	    margin-left: 20rpx;
	}
	.box2>input{
		text-align: right;
		font-size:30rpx;
	}
	.box2>view{
		white-space: nowrap;
	}
	.box2{
		height:88rpx;
		background:rgba(250,250,250,0.3);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(0,0,0,1);
		margin-top: 20rpx;
	}
	.fot3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(244,48,48,1);
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		margin-top: 30rpx;
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
	}
	.active{
		background: #0F77FE;
		color: #FFFFFF !important;
	}
	.tab2{
		border-radius: 0 30rpx 30rpx 0;
	}
	.tab1{
		border-radius: 30rpx 0 0 30rpx;
	}
	.tab_box>view{
		width: 30%;
		height: 64rpx;
		margin-bottom: 20rpx;
		border: 1px solid #0F77FE;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(15, 119, 254, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.tab_box{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.bigbox{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
